import { reqUserById,reqUpdateUser } from '../../api'
const oForm = document.querySelector('#updateForm');
const userInput = document.querySelector('[name=username]');
const fileInput = document.querySelector('[name=profileFile]');
const imgPrev = document.querySelector('#imgPrev');

const urlUtils = new URL(location.href)
let _id = urlUtils.searchParams.get('id');

async function getUser() {

    // 根据id获取当前用户数据
    let res = await reqUserById(_id);
    let user = res.data;
    // 将数据渲染到页面
    userInput.value = user.username;
    imgPrev.src = 'http://localhost:9999' + user.profile;
    console.log('user: ', user);
    // document.querySelector('[name=_id]').value = user._id;
}
getUser()

/**
 * 完成图片预览功能
 * @param {*} e 
 * 
 * 
 */
fileInput.onchange = function () {
    const reader = new FileReader();
    reader.readAsDataURL(this.files[0]);
    reader.onload = function (e) {
        imgPrev.src = e.currentTarget.result;
    }
}
/**
 * 保存修改操作
 * 1. 给表单[onsubmit]或按钮[onclick]绑定事件
 * 2. 阻止表单默认行为
 * 3. 获取表单元素中的数据
 * 4. 发送ajax请求完成更新操作
 */

oForm.onsubmit = async function (e) {
    // 阻止默认
    e.preventDefault();
    let formdata = new FormData(oForm);
    // console.log(formdata.get('profileFile'));
    formdata.set('_id',_id);
    
    console.log(formdata.get('_id'),formdata.get('username'),formdata.get('profileFile'));// 检查打印的三个值，是否都有值，如果有在发请求

    let res = await reqUpdateUser(formdata); // _id username profileFile
    // console.log('res: ', res);
    if(res.code === '2000'){
        location.href = '/users.html';
    }else{
        alert(res.message);
    }
}